<template>
<!-- 详情页面 -->
  <div class="fa">
    <div class="xqtop">
      <div><router-link tag="a" to="/home"> &#60; 美食圈</router-link></div>
      <div><router-link tag="a" to="/classify">菜谱分类 ></router-link></div>
    </div>
    <div class="container">
      <div class="image">
        <img :src="datalists[this.indexs].imgurls" alt="" />
      </div>
      <div class="introduce">
        <h2>{{datalists[this.indexs].title}}</h2>
        <div class="text-gray fa">
          <a href="">
            <img src="../assets/img/1000001.jpg" alt="" />
            醉美食光
          </a>
          &nbsp;&nbsp;
          <span>2022-09-30 07:39:31</span>
          &nbsp;&nbsp; 75
        </div>
        <ul class="info_list fa">
          <li v-for="(item,index) in datalists[this.indexs].attribute" :key="index" >
            <div :id="item.id"></div>
            {{item.titles}}
          </li>
        </ul>
        <p class="suggest">
          {{datalists[this.indexs].introduce}}
        </p>
        <div class="material">
          <dl>
            <dt>
              <span class="fa h5"></span>
              主料
              <small>({{datalists[this.indexs].main.quantity}}人份)</small>
            </dt>
            <dd v-for="(item,index) in datalists[this.indexs].main.materialScience" :key="index">
              {{item.name}}
              <span>{{item.weight}}</span>
            </dd>
          </dl>

          <dl>
            <dt>
              <span class="fa h5"></span>
              辅料
            </dt>
            <dd v-for="(item,index) in datalists[this.indexs].accessories.materialScience" :key="index">
              {{item.name}}
              <span>{{item.weight}}</span>
            </dd>
          </dl>
        </div>
        <p>约需要{{datalists[this.indexs].time}}左右准备以上食材及配料。</p>
      </div>
      <div class="make-list">
        <h2> {{datalists[this.indexs].name}}制作步骤：</h2>
        <div class="make-item" v-for="(item,index) in datalists[this.indexs].step" :key="index">
          <div class="make-img">
            <span>第{{item.index}}步</span>
            <img :src="item.img" alt="" />
          </div>
          <p>{{item.p}}</p>
        </div>
        <div class="tips">
          <h2> 烹饪技巧/小提示</h2>
          <div class="tips-list">
            <p v-for="(item,index) in datalists[this.indexs].tips" :key="index" >
              {{item}}
            </p>
          </div>
        </div>
        <div class="cuisine">
          <a href="" v-for="(item,index) in datalists[this.indexs].series" :key="index">{{item}}</a>
        </div>
      </div>
      <div class="recommend">
        <h2 class="toph2">相关菜谱推荐</h2>
        <div class="recommend-list">
          <div class="recommend-item" v-for="(item,index) in relevantlists" :key="index" @click="dataadd(index)">
            <img :src="item.img" alt="" />
            <div class="item-right">
              <h2>{{item.title}}</h2>
              <p>
                {{item.p}}
              </p>
            </div>
          </div>
          
        </div>
      </div>
      <div class="hot">
        <h2 class="hoth2">热门菜谱推荐</h2>
        <div class="hot-list">
          <div class="hot-item" v-for="(item,index) in hotlists" :key="index" @click="hotadd(index)">
            <img :src="item.imgurl" alt="" />
            <h3>{{item.title}}</h3>
            <p>
              {{item.p}}
            </p>
          </div>
        </div>
      </div>
      <div class="hotarticle">
        <h2>热门文章推荐</h2>
        <ul>
          <li>
            <router-link tag="a" to="/snack" href="">
              <h3>抄手怎么包?抄手的6种包法图文解析</h3>
              <p>
                <span>5年前</span>&nbsp; <span>阅读：5657</span>&nbsp;
                <span>评论：0</span>&nbsp;
              </p>
            </router-link>
          </li>
          <li>
            <a href="">
              <h3>抄手怎么包?抄手的6种包法图文解析</h3>
              <p>
                <span>5年前</span>&nbsp; <span>阅读：5657</span>&nbsp;
                <span>评论：0</span>&nbsp;
              </p>
            </a>
          </li>
          <li>
            <a href="">
              <h3>抄手怎么包?抄手的6种包法图文解析</h3>
              <p>
                <span>5年前</span>&nbsp; <span>阅读：5657</span>&nbsp;
                <span>评论：0</span>&nbsp;
              </p>
            </a>
          </li>
          <li>
            <a href="">
              <h3>抄手怎么包?抄手的6种包法图文解析</h3>
              <p>
                <span>5年前</span>&nbsp; <span>阅读：5657</span>&nbsp;
                <span>评论：0</span>&nbsp;
              </p>
            </a>
          </li>
          <li>
            <a href="">
              <h3>抄手怎么包?抄手的6种包法图文解析</h3>
              <p>
                <span>5年前</span>&nbsp; <span>阅读：5657</span>&nbsp;
                <span>评论：0</span>&nbsp;
              </p>
            </a>
          </li>
          <li>
            <a href="">
              <h3>抄手怎么包?抄手的6种包法图文解析</h3>
              <p>
                <span>5年前</span>&nbsp; <span>阅读：5657</span>&nbsp;
                <span>评论：0</span>&nbsp;
              </p>
            </a>
          </li>
          <li>
            <a href="">
              <h3>抄手怎么包?抄手的6种包法图文解析</h3>
              <p>
                <span>5年前</span>&nbsp; <span>阅读：5657</span>&nbsp;
                <span>评论：0</span>&nbsp;
              </p>
            </a>
          </li>
          <li>
            <a href="">
              <h3>抄手怎么包?抄手的6种包法图文解析</h3>
              <p>
                <span>5年前</span>&nbsp; <span>阅读：5657</span>&nbsp;
                <span>评论：0</span>&nbsp;
              </p>
            </a>
          </li>
          <li>
            <a href="">
              <h3>抄手怎么包?抄手的6种包法图文解析</h3>
              <p>
                <span>5年前</span>&nbsp; <span>阅读：5657</span>&nbsp;
                <span>评论：0</span>&nbsp;
              </p>
            </a>
          </li>
        </ul>
      </div>
      <div class="xqbottom">
        <div>
          <router-link tag="a" to="/home"  class="exit"> 美食圈首页 </router-link>
        </div>
        <p class="text">
          版权所有 © 2022
          <a href="" title="" class="text-gray">（meishiq.com）美食圈</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import {getspecificsdata} from "../api/home.js";
    export default {
        data() {
            return {
                indexs:null,
                datalists: null,
                relevantlists:null,
                hotlists:null,
            };
        },
        created(){
            if("index" in this.$route.query){
                let {item,index} =this.$route.query;
                this.indexs = index;
                this.datalists = item;
                
            }
            getspecificsdata().then(data=>{
              this.relevantlists = data.data;
              this.hotlists = data.hot;
          })
        },
        mounted(){
          window.scrollTo(0,0)
        },
        methods:{
          // 相关菜谱推荐通过 id查找 数据
          dataadd(index){
            this.indexs = index;
            this.datalists = this.relevantlists;
            // this.relevantlists.splice(index,1)
            window.scrollTo(0,0)
          },
          // 热门菜谱推荐 id查找 数据
          hotadd(index){
            this.indexs = index;
            this.datalists = this.hotlists;
            window.scrollTo(0,0)
          }
        }
    };
</script>

<style lang="scss" >
@import "../assets/css/specifics.css";


</style>